<template>
  <div class="home">
    <gltitle
      :is_mt="true"
      :is_notice="false"
      :is_back="true"
      :is_name="true"
      :title="title"
    ></gltitle>

    <div class="container">
      <div style="margin-top: 0.22rem">
        <div class="empty db" v-show="emptyShow">
          <div class="flexs">
            <van-empty
              class="custom-image"
              :image="require('../../assets/images/Group12.png')"
              :description="$t('page1.doc45')"
            />
          </div>
        </div>

        <van-pull-refresh
          v-model="refreshing"
          :success-text="$t('load.refreshed')"
          @refresh="onRefresh(0)"
          head-height="100"
          v-if="!emptyShow"
        >
          <van-list
            v-model="loading"
            :finished="finished"
            :loading-text="$t('load.loading')"
            @load="onLoad"
            :immediate-check="check"
          >
            <ul class="list">
              <li
                v-for="(item, k) in datalist"
                :key="k"
                @click="ontab(item.userId, item.teamCount)"
              >
                <div class="db head">
                  <div class="ico"><img v-lazy="item.avatar" alt="" /></div>
                  <div class="flexs">
                    <div class="n">{{ item.account }}</div>
                    <!-- <div class="n1" v-show="item.activeTime">{{ $t('page4.doc25') }}</div> -->
                    <!--              <div class="n1" v-show="item.level != -1">{{ item.level }}-{{ $t('page4.doc53') }}</div>-->
                    <div class="s" v-show="item.activeTime">
                      {{ item.activeTime }}
                    </div>
                    <!-- <div class="s">{{ common.formatName(item.account,7,11) }}</div> -->
                    <!-- <div class="s">{{ common.headTail(item.account) }}</div> -->
                  </div>
                  <div class="str" v-if="item.partnerLevelName">
                    <div class="s">{{ $t("new.doc54") }}：</div>
                    <div class="s theme">
                      <img :src="item.partnerLevelIcon" alt="" />
                      {{ item.partnerLevelName }}
                    </div>
                  </div>
                  <div class="vip">
                    <img src="@/assets/images/V0.png" alt="">
                    <div class="text">{{ item.level }}</div>
                  </div>
                </div>
                <div class="bot">
                  <div class="info">
                    <div class="name">{{ $t("page.doc76") }}</div>
                    <div class="value">{{ item.teamCount }}</div>
                  </div>
                  <div class="info">
                    <div class="name">{{ $t("page4.doc52") }}</div>
                    <div class="value">{{ item.registerTime }}</div>
                  </div>
                </div>
              </li>
            </ul>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: this.$t("new.doc4"),
      datalist: [],

      loading: false,
      finished: false,

      totalPage: "",
      pageSize: 0,
      refreshing: false,
      emptyShow: false,
      datalistNum: 0,
      check: true,
      i: 0,
    };
  },

  mounted() {},

  methods: {
    ontab(id, un) {
      if (un == 0) {
        return;
      }
      this.i = this.i + 1;
      if (this.i > 2) {
        return;
      }
      this.userId = id;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = document.documentElement.scrollTop = 0;
      this.pageSize = 0;
      this.totalPage = "";
      this.finished = false;
      this.loading = true;
      this.datalist = [];
      this.emptyShow = false;
      this.onLoad();
    },

    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.datalist = [];
          this.refreshing = false;
        }
        this.getlist();
      }, 500);
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;

      this.pageSize = 0;
      this.totalPage = "";

      this.onLoad();
    },

    getlist() {
      this.pageSize = this.pageSize + 1;

      if (this.pageIndex == this.totalPage) {
        this.loading = false;
        this.finished = true;

        return;
      }

      this.$post(this.URL.income.teamList, {
        userId: this.userId,
        page: this.pageSize,
        pageSize: 10,
      }).then((res) => {
        if (res.code == 0) {
          if (res.code == 2001) {
            this.loading = true;
            this.finished = false;
            this.emptyShow = true;
            return;
          }
          if (res.data.list.length == 0) {
            this.emptyShow = true;
          }
          this.totalPage = res.data.page.totalPage;
          this.pageIndex = res.data.page.index;

          this.datalistNum = res.data.page.count;

          let initData = res.data.list;
          this.datalist.push(...initData);
          this.loading = false;
        }
      });
    },

    path_url(url) {
      this.$router.push({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
.vip {
  position: relative;
  img {
    width: 60px;
  }

  .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: 600;
    color: #fff;
  }
}

.list {
  li {
    background: #181c21;
    padding: 0.32rem 0.28rem;
    border-radius: 0.24rem;
    margin-bottom: 0.32rem;

    &:last-child {
      border: 0;
    }

    .head {
      .ico {
        width: 12%;

        img {
          width: 0.8rem;
          height: 0.8rem;
          border-radius: 50%;
        }
      }

      .n {
        font-weight: 500;
        color: var(--COcolor3);
        line-height: 0.4rem;
      }

      .n1 {
        font-weight: 400;
        margin-top: 0.16rem;
      }

      .s,
      .time {
        font-size: 0.24rem;
        color: var(--COcolor1);
        line-height: 0.33rem;
        margin-top: 0.12rem;

        &.theme {
          margin-top: 0.12rem;
          color: #4272ff;
          font-size: 0.28rem;
          display: flex;
          line-height: 0.32rem;
          justify-content: flex-end;

          img {
            width: 0.36rem;
            height: 0.32rem;
            margin-right: 0.1rem;
          }
        }
      }

      .s2 {
        font-size: 0.26rem;
        // font-weight: 500;
        line-height: 0.4rem;

        span {
          color: var(--COcolor3);
        }
      }

      .str {
        width: 40%;
        text-align: right;
      }

      .flexs {
        width: 40%;
        padding: 0 0.1rem;
      }
    }

    .bot {
      padding-top: 0.32rem;
      border-top: 0.02rem solid rgba(255, 255, 255, 0.08);
      margin-top: 0.32rem;
      line-height: 1.2;

      .info {
        display: flex;
        align-items: center;
        justify-content: space-between;

        &:nth-of-type(n + 2) {
          margin-top: 0.24rem;
        }

        .name {
          color: #bdbdbd;
          font-size: 0.26rem;
        }

        .value {
          color: #fff;
          font-size: 0.26rem;
        }
      }
    }
  }
}

.custom-image {
  transform: translateY(50%);
  :deep(.van-empty__image){
    width: 4.4rem;
  }
  :deep(img) {
    height: 3.42rem !important;
  }
}
</style>
